<template>
  <div class="register" v-loading="!hospitalDetail?.hosname">
    <div class="top">
      <h3 class="title">{{ hospitalDetail?.hosname }}</h3>
      <div class="level">
        <SvgIcon name="good" width="18px" height="18px" />
        <span>&nbsp;{{ hospitalDetail?.param.hostypeString }}</span>
      </div>
    </div>
    <!-- 展示内容的区域 -->
    <div class="content">
      <div class="left">
        <img
          :src="`data:image/jpeg;base64,${hospitalDetail?.logoData}`"
          alt="logo"
        />
      </div>
      <div class="right">
        <h3 class="title">挂号规则</h3>
        <ul>
          <li>
            <span class="time">
              预约周期：
              <span style="color: orange; font-size: 17px">
                {{ bookingRule?.cycle }}
              </span>
              天
            </span>
            <span class="time">
              放号时间：
              <span style="color: skyblue; font-size: 17px">
                {{ bookingRule?.releaseTime }}
              </span>
            </span>
            <span class="time">
              停挂时间：
              <span style="color: #ff6caf; font-size: 17px">
                {{ bookingRule?.stopTime }}
              </span>
            </span>
          </li>
          <li>具体地址：{{ hospitalDetail?.param.fullAddress }}</li>
          <li>规划路线：{{ hospitalDetail?.route }}</li>
          <li>
            退号时间：就诊前{{ cancelDay }}工作日
            {{ bookingRule?.quitTime }}
            前取消
          </li>
        </ul>
        <h3 class="book">医院预约规则</h3>
        <ol>
          <li v-for="(item, index) in bookingRule?.rule" :key="index">
            {{ item }}
          </li>
        </ol>
      </div>
    </div>
    <!-- 科室展示 -->
    <div class="department">
      <!-- 左侧一级科室导航 -->
      <div class="leftNav" :class="{ dark: dark }">
        <ul>
          <!-- 动态绑定类名显示激活状态 -->
          <li
            :class="{ active: currentIndex == index }"
            v-for="(item, index) in hospitalDepartment"
            :key="item.depcode"
            @mouseenter="changeDepartment(index)"
          >
            {{ item.depname }}
          </li>
        </ul>
      </div>
      <!-- 科室展示区 -->
      <div class="departmentInfo">
        <!-- 遍历所有科室 -->
        <div
          class="showDepartment"
          v-for="(department, index) in hospitalDepartment"
          :key="department.depcode"
        >
          <!-- 展示一级科室 -->
          <h1
            :ref="(vc: any) => (allDepartmentRef[index] = vc)"
            class="department_title"
            :class="{ dark: dark }"
          >
            {{ department.depname }}
          </h1>
          <!-- 展示二级科室 -->
          <ul>
            <li
              v-for="item in department.children"
              :key="item.depcode"
              @click="register(item)"
            >
              {{ item.depname }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Register">
import useHospitalDetailsStore from '@/store/modules/hospitalDetails'
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'
// 引入医院详情仓库获取医院数据、预约信息、科室信息
const { hospitalDetail, bookingRule, hospitalDepartment } = storeToRefs(
  useHospitalDetailsStore(),
)
// 控制科室高亮
let currentIndex = ref(0)
import useThemeStore from '@/store/modules/theme'
import { useRoute, useRouter } from 'vue-router'
// 从仓库中获取控制是否为深色模式的属性
const { dark } = storeToRefs(useThemeStore())
// 获取路由器对象
const router = useRouter()
// 获取路由对象
const route = useRoute()
// 获取所有的一级科室实例对象
const allDepartmentRef = ref<any[]>([])

// 将取消日期的-1、-2计算为 一、二...
let cancelDay = computed(() => {
  switch (bookingRule.value?.quitDay) {
    case -1:
      return '一'
    case -2:
      return '二'
    case -3:
      return '三'
    case -4:
      return '四'
  }
})
// 鼠标处于左侧导航标题的回调
const changeDepartment = (index: number) => {
  // 存储当前鼠标处于左侧导航的索引,用于高亮显示
  currentIndex.value = index
  // 获取右侧展示区的全部h1(通过ref进行获取)
  // let allH1 = document.querySelectorAll('.department_title')
  // 将对应的h1滚动到顶部 behavior:过渡动画效果 block:滚动到的位置默认为起始位置
  allDepartmentRef.value[index].scrollIntoView({
    behavior: 'smooth',
    block: 'start',
  })
}
// 点击二级科室回调
const register = (item: any) => {
  // 路由跳转到挂号页面(需要进行路由鉴权判断用户是否登录)
  //item为科室信息
  router.push({
    name: 'registerStepOne',
    query: {
      // 医院code
      hoscode: route.query.hoscode,
      // 科室code
      depcode: item.depcode,
    },
  })
}
</script>

<style scoped lang="scss">
.register {
  margin: 20px;
  color: $base-color;
  .top {
    display: flex;
    align-items: baseline; // 垂直对齐对齐方式
    .title {
      color: $base-active-color;
      font-size: 30px;
      margin-right: 30px;
      font-weight: bold;
    }
    .level {
      display: flex;
      align-items: center;
    }
  }
  .content {
    display: flex;
    .left {
      width: 150px;
      margin-top: 20px;
      margin-right: 20px;
      img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
      }
    }
    .right {
      flex: 1;
      .title {
        font-size: 18px;
        margin-top: 20px;
        color: $base-active-color;
        font-weight: bold;
      }
      ul {
        li {
          margin-top: 5px;
          line-height: 20px;
          .time {
            margin-right: 20px;
          }
        }
      }
      .book {
        margin-top: 10px;
        font-size: 18px;
        color: $base-active-color;
        font-weight: bold;
      }
      ol {
        margin-top: 10px;
        list-style-type: decimal;
        margin-left: 20px;
        li {
          margin-top: 5px;
          line-height: 20px;
        }
      }
    }
  }
  .department {
    margin: 40px 0 20px 20px;
    width: 100%;
    height: 480px;
    display: flex;
    .leftNav {
      width: 100px;
      background-color: rgb(227, 238, 242);
      &.dark {
        background-color: rgb(78, 76, 76);
        color: rgb(176, 171, 171);
        li {
          &.active {
            background-color: #201f1f;
            // color: rgb(237, 243, 243);
          }
        }
      }
      li {
        line-height: 40px;
        text-align: center;
        // 防抖
        border-left: 3px solid transparent;
        &.active {
          cursor: pointer;
          color: $base-active-color;
          font-size: 17px;
          background-color: #fff;
          border-left: 3px solid $base-active-color;
        }
      }
    }
    .departmentInfo {
      flex: 1;
      height: 100%;
      overflow: auto; // 超出部分显示滚动条
      // 隐藏滚动条
      &::-webkit-scrollbar {
        display: none;
      }
      .showDepartment {
        .department_title {
          background-color: rgb(227, 238, 242);
          line-height: 30px;
          margin-bottom: 10px;
          padding-left: 15px;
          &.dark {
            background-color: rgb(78, 76, 76);
            color: rgb(176, 171, 171);
          }
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          margin-left: 10px;
          li {
            width: 33.33%;
            line-height: 30px;
            &:hover {
              cursor: pointer;
              color: $base-active-color;
            }
          }
        }
      }
    }
  }
}
</style>
